LAPORAN TUGAS MATA KULIAH

METODOLOGI DESAIN PERANGKAT LUNAK PRAKTIK

Dosen : Irma Handayani, S.Kom., M.Cs.

Studi Kasus

“ PERANCANGAN APLIKASI MENGGAMBAR ONLINE BERBASIS WEB

MENGGUNAKAN METODE DEVOPS ”

Oleh :

5200411122 Gressensia Olivia Neno Aumenu

5200411144 Bella Primin

5200411202 Berliana 'Isyatin Rodhiyah

5200411226 Ade Lia Saputri

5200411236 Lili Christi

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS TEKNOLOGI YOGYAKARTA

BAB I

PENDAHULUAN

1.1 Latar Belakang

Menggambar adalah salah satu cara untuk mengekspresikan perasaan melalui goresan pena.

Untuk mengekspresikan diri, biasanya anak kecil akan suka mencoret-coret kertas.

Dikarenakan kebiasaan mencoret itu, banyak kertas yang terbuang dan tidak bisa dipakai lagi.

Apalagi penggunaan kertas dalam kehidupan semakin bertambah. Banyaknya konsumsi kertas

tentu saja dapat mempengaruhi tingkat penebangan pohon.

Selain kertas, banyak pula benda benda yang rusak, juga banyak dinding yang kotor akibat

coretan para anak kecil. Kerusakan yang ditimbulkan akan membutuhkan lebih banyak budget

untuk memperbaikinya. Selanjutnya, penggunaan pensil, pensil warna, krayon, ataupun cat,

belum terlalu perlu hanya untuk bermain anak-anak, karna akan menambah budget yang

dibutukan untuk itu.

Berawal dari adanya keluhan para orangtua kepada Perusahaan BimBel Bumi karena sistem

menggambar yang manual, jadi banyak media serta bahan yang harus dikumpulkan, untuk itu

kami melakukan sebuah pembuatan rancangan aplikasi menggambar berbasis web untuk

Bimbingan Belajar Bumi. Dengan mendaftarkan anaknya menggunakan aplikasi ini, para guru

juga dapat memantau perekembangan seni para murid.

Dalam aplikasi menggambar online ini dapat membantu meminimalisir penggunaan kertas

sebagai media serta dapat mengurangi budget yang akan dikeluarkan untuk anak-anak

menggambar. Selain itu, aplikasi ini akan membantu anak-anak untuk belajar menggambar.

Hal ini sangat mempermudah proses menggambar dalam media dan bidang yang ada.

Sistem ini akan mengolah data user, data admin dan data gambar dengan menggunakan

MySQL. Sistem ini dibangun dengan menggunakan bahasa pemrograman PHP, HTML,

JavaScript, dan CSS. Hasil dari penelitian ini sistem dapat membantu proses penggambaran

dengan adanya system yang efisien dan lebih fleksibel.

1.2 Batasan Masalah

Berdasarkan dari identifikasi masalah tersebut, kami membatasi masalah hanya pada:

a. Pengguna aplikasi adalah para guru dan murid di Bimbingan Belajar Bumi.

b. Pendaftaran user dilakukan oleh admin, yang selaku guru dari user.

c. Alat menggambar yang digunakan hanya berupa garis dan warna.

d. Tampilan menggambar berupa kanvas, volume garis, dan pilihan warna.

e. Gambar dapat disimpan, diubah, dan dihapus.

1.3 Rumusan Masalah

Mengenai rumusan masalah yang akan dibahas, berdasarkan konteks masalah yang diuraikan

di atas, khususnya yaitu:

a. Bagaimana cara membuat aplikasi menggambar berbasis web.

b. Bagaimana merancang dan membangun aplikasi menggambar yang mudah digunakan untuk

anak-anak.

1.4 Tujuan Penelitian

Tujuan dilakukanya penelitian ini yaitu:

a) Menghasilkan sebuah aplikasi menggambar untuk anak-anak.

b) Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.

1.5 Manfaat Penelitian

Berikut adalah manfaan dari dilakukanya penelitian ini adalah :

a) Mepermudah anak-anak untuk dapat menggambar dan mewarnai.

b) Mengurangi penggunaan kertas

c) Mengurangi penggunaan budget untuk menggambar.

BAB II

LANDASAN TEORI

2.1 Definisi Menggambar

Secara umum pengertian menggambar adalah kegiatan menorehkan pensil ataupun

pewarna di atas media kertas. Sedangkan pengertian secara khusus, menggambar adalah

kegiatan-kegiatan membentuk imaji, dengan menggunakan banyak pilihan teknik dan alat

dengan membuat tanda-tanda tertentu di atas permukaan media dengan mengolah goresan dari

alat gambar. Gambar merupakan karya seni rupa dua dimensi yang berfungsi untuk untuk

menerangkan ataupun menjelaskan sesuatu.

2.2 Sistem Menggambar

Menggambar adalah kegiatan membentuk citra dengan menggunakan banyak pilihan

teknik dan alat. Dengan membuat tanda-tanda tertentu di atas permukaan dan mengolah

goresan dari alat gambar. Kebanyakan karya menggambar adalah representasi dari ingatan atau

imajinasi seorang juru gambar.

2.3 HTML

HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman

website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau

"bahasa markup". HTML disusun berdasar kode dan simbol tertentu, yang dimasukkan dalam

sebuah file atau dokumen. Sehingga bisa ditampilkan pada layar komputer. Dan bisa dipahami

oleh para pengguna internet.

Memahami setiap kata yang terkandung, hypertext sendiri dimaksudkan sebagai metode

yang digunakan untuk berpindah laman web ke laman lain. Usai mengklik tulisan atau simbol

yang muncul di halaman website.

Lalu istilah markup, diartikan sebagai suatu hal yang dilakukan tag HTML terhadap teks

didalamnya. Contoh jika mengetik suatu teks dengan tanda tag . Maka teks tersebut akan

muncul dengan huruf tebal atau bold di laman website.

2.4 CSS

CSS adalah kepanjangaan dari Cascading Style Sheets yang berguna untuk

menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa

markup.CSS dipakai untuk mendesain halaman depan atau tampilan website. CSS menangani

tampilan dan ‘rasa’ dari halaman website.

Ada banyak hal yang dapat Anda lakukan menggunakan CSS dibandingkan dengan

bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, Anda dapat

mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang

dipakai.Tidak hanya itu CSS juga bisa untuk mendesain layout, variasi tampilan di berbagai

perangkat yang berbeda, dan berbagai efek yang dipakai di dalam website.

CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian

tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat

ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun

PHP.

2.5 JAVASCRIPT

JavaScript adalah bahasa pemrograman populer yang digunakan untuk membuat situs

dengan konten website yang dinamis. Konten dinamis artinya konten dapat bergerak atau

berubah di depan layar tanpa perlu mereload halaman. Misalnya saja, fitur slideshow foto,

gambar animasi, pengisian poling, dan lainnya.

JavaScript sendiri sebenarnya biasanya dikolaborasikan dengan HTML dan CSS. Di

mana HTML digunakan untuk membuat struktur website dan CSS untuk merancang style

halaman website. Lalu, JavaScript berperan menambahkan elemen interaktif untuk

meningkatkan engagement pengguna.

2.6 Data Flow Diagram

DFD adalah suatu diagram yang menggambarkan aliran data dari sebuah proses yang

sering disebut dengan sistem informasi. Di dalam data flow diagram juga menyediakan

informasi mengenai input dan output dari tiap entitas dan proses itu sendiri.

Dalam diagram alir data juga tidak mempunyai kontrol terhadap flow -nya, sehingga

tidak adanya aturan terkait keputusan atau pengulangan. Bentuk penggambaran berupa

data flowchart dengan skema yang lebih spesifik. Menurut Kenneth Kozar, tujuan dari adanya

DFD sendiri adalah sebagai penyedia atau menjembatani antara pengguna dengan sistem.

Data flow diagram berbeda dengan UML (Unified Modelling Language), dimana hal

mendasar yang menjadi pembeda antara kedua skema tersebut terletak

pada flow dan objective penyampaian informasi di dalamnya.

2.7 Eternity Relationship Diagram (ERD)

ERD adalah pemodelan data atau sistem dalam database yang sudah sering digunakan

oleh banyak lembaga. Fungsinya ERD adalah untuk memodelkan struktur dan hubungan antar

data yang relatif kompleks. Keberadaan sistem ERD sangat penting untuk perusahaan dalam

mengelola data yang dimilikinya.Bentuknya seperti diagram yang menjelaskan hubungan antar

objek data.

Bentuknya seperti diagram yang menjelaskan hubungan antar objek data. Untuk

menggambarkannya dibutuhkan:

 Notasi ialah seperangkat lambang yang menggambarkan data

 Simbol sebagai lambang sebagai penanda

 Bagan merupakan rancangan atau skema untuk mempermudah penafsiran dan lain

sebagainya.

2.8 Metode DevOps

DevOps merupakan singkatan dari dua kata yaitu Development dan Operation. Di mana

kedua kata tersebut bermakna menggabungkan proses development/pengembangan dari

sebuah sistem/aplikasi dengan operation/operasional. Seperti yang disebutkan sebelumnya,

DevOps adalah sebuah prinsip developer untuk mengkoordinasikan antar tim yaitu tim

development dengan tim operations dengan efektif dan efisien.Pola pikir yang dibentuk oleh

DevOps adalah koordinasi antar tim yang dapat dilakukan dengan cara singkat sehingga tidak

membutuhkan banyak pertanyaan. Tim operation atau development cukup mengonfigurasi

beberapa komponen yang dibutuhkan melalui prosedur yang dibuat. Tentunya koordinasi yang

diterapkan pada DevOps membutuhkan sebuah tools. Banyak tools yang bisa kamu gunakan,

salah satunya adalah Source Code Management.

(SCM) yang biasa digunakan secara umum oleh tim development. Produk SCM yang

paling terkenal adalah Git, ditemani oleh Source Code Repository(SCR) seperti GitHub,

GitLab, Bitbucket atau yang lainnya. Namun SCM saja tak cukup untuk mengomunikasikan

antara tim development dengan tim operational.

Agar tim operational dapat mengetahui permasalahan yang terjadi, biasanya akan

dihubungkan ke Product Management Software, seperti Jira. Melalui Product Management

Software, tim operation dapat mengetahui berbagai permasalahan yang terjadi pada

sistem/aplikasi. Sehingga antara pihak development dengan operational akan saling terhubung

satu sama lain.

DevOpsbertujuan untuk meningkatkan kolaborasi antara tim development dan tim

operation dari mulai perencanaan hingga aplikasi/fitur ter-deliverke pengguna. Semua itu harus

dilakukan secara otomatis agar:

1. Meningkatkan deployment frequency

2. Meningkatkan waktu pemasaran

3. Menurunkan tingkatkegagalan pada rilisan terbaru

4. Mempersingkat waktu perbaikan

5. Meningkatkan waktu pemulihan.

Melalui berbagai referensi, ternyata ada banyak alat bantu untuk menerapkan

DevOps yang harus kita ketahui

1. Source Code Management

Melalui sumber repository, antar developer dapat memeriksa dan mengubah kode

tanpa perlu saling menulis satu sama lainnya. Source controlini mungkin telah ada sejak 40

tahun yang lalu, tetapi ini merupakan komponen utama dari Continuous Integrationatau CI.

Adapun contoh produk yang berfungsi sebagai SCM yaitu Git, Subversion, Cloudforce,

Bitbucketdan TFS.

2. Build Server

Build Server adalah alat otomatisasi yang mengkompilasi kodedalam SCR (Source

Code Repository) ke dalam basis kodeyang dapat dieksekusi. Alat ini bisa kamu temukan

seperti Jenkins, SonarQubedan Artifactory.

3. Configuration Management

Manajemen konfigurasi berguna untuk menetapkan konfigurasi pada server atau

lingkungannya. Alat yang populer biasa kamu temukan seperti Puppet dan Chef.

4. Virtual Infrastructure

Amazon Web Servicesdan Microsoft Azureadalah contoh infrastruktur virtual.

Virtual Infrastructureini disediakan oleh vendor cloudyang menjual insrastruktur atau Platform

as a Service(PaaS). Infrastruktur ini memiliki API yang memungkinkan kamu membuat mesin

baru yang terprogram dengan alat manajemen konfigurasi. Ada juga privateclouddi mana

privateinfrastructure virtualmemungkinkan kamu menjalankan clouddi hardwaresebagai data

terpusat. Alat ini dikombinasikan dengan alat otomatisasi untuk memberdayakan organisasi

yang melatih DevOpsdengan kemampuan konfigurasi servertanpa jari di atas keyboard. Jika

ingin menguji kodebaru, cukup mengirimkan kodeke infrastruktur clouduntuk membangun

lingkungan. Kemudiantes dijalankan tanpa adanya campur tangan manusia.

5. Test Automation

Test automationsebenarnya sudah ada sejak lama. Pengujian yang diadopsi oleh

DevOpsberfokus pada pengujian otomatis melalui pipeline builduntuk memastikan bahwa

build deployable sudah dilakukan. Tools populer untuk tahapan ini adalah selenium dan air.

BAB III

ANALISIS DAN PERENCANAAN SISTEM

3.1 ANALISIS SISTEM

Penelitian ini diharapkan dapat menghasilkan sebuah aplikasi menggambar yang dapat

digunakan untuk semua kalangan, terutama anak-anak, dengan mudah dan efektif.

Kebutuhan system ialah sebagai berikut :

a. Aplikasi ini berbasis web yang akan digunakan pada browser.

b. Aplikasi akan terkoneksi ke server database melalui koneksi internet dari perangkat user.

3.2 METODE PENELITIAN

Teknik pengumpulan data yang digunakan dalam penelitian ini, sebagai berikut:

a. Observasi

Observasi merupakan teknik mendapatkan data primer dengan cara mengamati

langsung onyek datanya (Jogiyanto, 2008). Pada penelitian ini, observasi dilakukan

secara online untuk mengamati proses user menggambar dan hasil penggambaran user.

b. Wawancara

Wawancara adalah komunikasi dua arah untuk mendapatkan data daru responden

(Jogiyanto, 2008). Wawancara dilakukan untuk mengkonfirmasi data atau fakta yang

diperoleh pada saat observasi serta sekaligus untuk menggali software requirement dari

user. Wawancara dilakukan kepada user yang terlibat dalam proses menggambar

online.

c. Studi Pustaka

Studi pustaka dilakukan untuk mengumpulkan data dan informasi melalui

dokumen-dokumen baik dalam bentuk buku, jurnal, prosiding, laporan-laporan, atau

bentuk-bentuk lain dalam bentuk tercetak maupun digital. Studi pustaka akan semakin

kredibel apabila didukung oleh foto-foto atau karya tulis akademik dan seni yang telah

ada.

3.3 METODE PENGEMBANGAN SISTEM

Dalam penelitian ini menganalisa dan memaparkan bagaimana konsep penerapan metode

DevOps dalam pengembangan aplikasi menggambar berbasis web. Kami merancang aplikasi

dengan melakukan beberapa penelitian dengan menerapakan metode DevOps dalam

mengembangkan sistem aplikasi menggambar berbasis web yang kami buat.

Metode DevOps yang digunakan adalah sebagai berikut :

a. Plan (Perencanaan)

Pada tahap perencanaan, dilakukan proses identifikasi tujuan dan persyaratan untuk

merancang dan mengembangkan perangkat lunak.

Indentifikasi tujuan pada Aplikasi Menggambar Berbasis Web sebagai berikut :

 Menghasilkan sebuah aplikasi menggambar untuk anak-anak.

 Menghasilkan aplikasi menggambar yang dapat dengan mudah digunakan.

Perancangan dan pengembangan dibutuhkan:

 Internet Browser

 Perangkat lunak editor kode : Visual Code Studio

 Database Management System : MySQL.

 Bahasa Pemograman : PHP, HTML, JavaScript, dan CSS.

b. Develop

Berdasarkan pada tahapan sebelumnya, tim pengembang berfokus untuk

mengembangkan dan meninjau kode perangkat lunak. Kode aplikasi dikembangkan

dengan menggunakan Bahasa pemrograman PHP, HTML, javaScript, dan CSS.

c. Build

Pada tahap ini integrasi dari berbagai modul perangkat lunak dilakukan untuk

membuat file yang dapat dieksekusi untuk proses menggambar yang dikembangkan

sepenuhnya. Selain itu terdapat proses evaluasi untuk mengukur tingkat kesesuaian

hasil pengembangan perangkat lunak dengan persyaratan yang telah ditetapkan.

d. Test

Pada tahap ini pengujian otomasi dilakukan secara terus-menerus untuk memastikan

kualitas aplikasi menggambar yang telah dikembangkan. Tujuan lain dari pengujian

adalah untuk memastikan bahwa potensi kesalahan yang muncul di dalam aplikasi ini

telah dihilangkan dan untuk memastikan aplikasi berjalan dengan baik.

e. Deploy

Tahap ini berfokus pada penerapan ulang aplikasi secara terus-menerus. Jika fitur

pada aplikasi berhasil diterapkan, maka aplikasi siap dirilis.

f. Operate

Operasi dalam siklus DevOps berkaitan dengan konfigurasi dan pengelolaan aplikasi

menggambar setelah penerapan.

g. Monitor

Kinerja aplikasi menggambar yang diterapkan dipantau dengan mengumpulkan dan

menganalisis data penggunaan yang dapat membantu mendeteksi dan

mengidentifikasi pengecualian dan memberikan umpan balik untuk peningkatan

aplikasi secara berulang.

3.4 PERANCANGAN SISTEM

Perancangan system aplikasi menggambar berbasis web ini menggunakan DFD (Data

Flow Diagram) yang merupakan salah satu teknik pemodelan desain sistem berbasis web.

Pemodelan ini menjadi bagian penting dalam pengembangan sistem karena menjadi satu

satunya cara untuk memvisualisasikan desain sistem dan memeriksa apakah sudah memenuhi

standar yang diinginkan sebelum memulai coding. Beberapa jenis Diagram yang dibuat antara

lain yaitu Diagram koneks, DFD dan ERD.

a. Diagram Jenjang

Diagram Jenjang merupakan desain dan teknik dokumentasi dalam siklus

pengembangan system. Dengan tujuan dapat memberikan informasi berupa diagram tang

terstruktur menampilkan semua proses dalam system.

b. Diagram Level 0 (Diagram Konteks)

Diagram konteks atau level 0 merupakan diagram dengan tingkatan paling rendah, dimana

menggambarkan sistem berinteraksi dengan entitas eksternal. Pada diagram konteks akan

diberi nomor untuk setiap proses yang berjalan, dimulai dari angka 0 terlebih dahulu.

c. Diagram Level 1

DFD level 1 merupakan lanjutan dari diagram konteks, dimana setiap proses yang

berjalan akan diperinci pada tingkatan ini. Sehingga, proses utama akan dipecah menjadi

sub – sub proses yang lebih kecil lagi.

d. Diagram level 2

DFD level 2 merupakan tingkat lanjutan dari level yang sebelumnya, dimana pada fase ini

akan dijelaskan lebih detail terkait tiap prosesnya.

DFD Level 2 Master Data

DFD Level 2 Proses Menggambar

e. ERD

(Entity Relationship Diagram) atau diagram hubungan entitas adalah diagram yang

digunakan untuk perancangan suatu database dan menunjukan relasi antar objek atau

entitas beserta atribut-atributnya secara detail.

3.7 PERANCANGAN DATABASE

3.7 DESAIN INTERFACE

3.7.1 Landing Page

3.7.2 Halaman Login

3.7.3 Halaman Daftar

3.7.4 Home

3.7.5 Halaman Menggambar

3.7.6 Daftar Gambar User

3.7.7

Hapus

Daftar

Gambar User

3.7.8 Daftar Nama User pada Admin

3.7.9 Daftar Gambar User pada Admin

3.7.10 Daftar Gambar User yang sudah dihapus oleh Admin

BAB IV

IMPLEMENTASI

4.1 Landing Page dan Source Code

Landing page pada halaman browser akan menampilkan halaman utama atau disebut juga halaman

beranda.dapat dilihat pada gambar dibawah ini:

<html>

<head>

<title>aplikasi Drawpen</title>

<style>

h1{

color: aliceblue;

text-align: center;

font-size: 160px;

text-indent: 200px;

}

h2{

color: aliceblue;

text-align: center;

font-size: 30px;

text-indent: 400px;

}

.login1{

color: rgb(255, 255, 255);

text-align:end;

margin-left:1200px;

font-size: 50px;

}

body{

background-image:url("gambar.jpg");

background-repeat: no-repeat;

background-size: cover;

}

</style>

</head>

<body >

<br>

<a class="login1" href="login.html">LOGIN</a>

<br>

<h1>Drawing</h1>

<h2>Easy Online to Draw and Painting</h2>

</body>

</html>

4.2 Halaman Login dan Source Code

Halaman Login Sebelum Masuk Kehalaman Mengambar Pengguna Diminta Untuk

Melakukan Login Dengan Mengisikan e-mail or username dan password.

<table class="tabel" align="center" style="border-radius: 15px; background-

color: rgb(75, 159, 233);" cellspacing="15">

<h3>LOGIN</h3></td>

</tr>

<tr>

<td>e-mail or username:</td>

<td>:

<input name="e-mail" id="NPM" type="text"

placeholder="masukkan e-mail" maxlength="10" required>

</td>

</tr>

<tr>

<td>Password</td>

<td>:

<input name="Password" id="Password" type="password"

placeholder="masukkan Password ">

</td>

</tr>

<tr>

<td><a href="home.html">LOGIN ADMIN</a></td>

<td><a href="home.html">LOGIN</a></td>

<td><a href="daftar.html">DAFTAR</a></td>

</tr>

</table>

4.3 Halaman Daftar dan Source Code

Sebelum menggunakan aplikasi,calon pengguna harus melakukan pendaftaran dengan

mengisikan e-mail,username,dan password.seperti pada gambar di bawah ini:

<table

class="tabel" align="center" style="border-radius: 15px; background-color: rgb(75, 159, 233);"

cellspacing="15">

<td colspan="2" align="center" style="color: #2412b0"> <h3>DAFTAR</h3></td>

</tr>

<tr>

<td>:

<input name="e-mail" id="NPM" type="text" placeholder="masukkan e-mail"

maxlength="10" required>

</td>

</tr>

<tr>

<td>username:</td>

<td>:

<input name="e-mail" id="NPM" type="text" placeholder="masukkan username"

maxlength="10" required>

</td>

</tr>

<tr>

<td>Password</td>

<td>:

<input name="Password" id="Password" type="password" placeholder="masukkan

Password ">

</td>

</tr>

<tr>

<td><a href="home.html">DAFTAR</a></td>

</tr>

</ta

4.4 Home dan Sorce Code

Tampilan Home terdiri dari:

1. Buat gambar

2. Daftar gambar

Berikut adalah tampilan Home pada aplikasi menggamba:

<html>

<head>

<style>

h1{

color: rgb(3, 28, 69);

font-size: 90px;

margin-top: 200px;

}

h6{

color: rgb(3, 28, 69);

font-size: 40px;

margin-top: 110px;

}

body{

background-image:url("444.png");

background-repeat: no-repeat;

background-size: cover;

}

table{

margin-left: 1250px;

}

.button12 {

background-color: #722ec0; /* Green */

border: none;

color: white;

padding: 20px 50px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

border-radius: 10px;

width: 70%;

}

.button1{

margin-top: 100px;

}

.a1{

margin-top: 70px;

}

</style>

</head>

<body>

<tr>

<td><h1>Drawpen</h1></td>

</tr>

<tr>

<td><a href="drawing/index.html" type="button" class="a1 btn btn-lg button12">BUAT

GAMBAR</a></td>

</tr>

<tr>

<td><a href="daftar_gambar_user.html" type="button" class="btn btn-lg

button12">DAFTAR GAMBAR</a></td>

</tr>

<tr>

<td><h6>Easy Online to Draw and Painting</h6></td>

</tr>

</table>

</body>

</html>

4.5 Halaman Menggambar dan Source Code

Pada halaman ini pengguna sudah dapat menggambar dengan mengekspresikan semuan idenya dengan bebas .

Menggambar atau ilustrasi merupakan kegiatan menggambar yang bertujuan untuk memperjelas ide cerita atau

narasi, dimana tujuan utamanya adalah untuk memperkuat, memperjelas, memperindah, dan mempertegas cerita

tersebut.

<html>

<head>

<title>Membuat Aplikasi Menggambar dengan JavaScript</title>

href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css">

</head>

<body>

<div id="header">Aplikasi Menggambar</div>

</div>

</div>

</div>

</div>

<span id="erase" class="button">Hapus</span>

</div>

<a href="../daftar_gambar_user.html" id="save" class="button">Simpan</a>

</div>

<span id="reset" class="button">Ulangi</span>

</div>

4.6 Daftar Gambar dan Source Code

Pada daftar gambar pengguna dapat melihat hasil gambaran yang sudah di buat pengguna

juga dapat menghapus gambar seperti pada gambar dibawah ini:

<title>Daftar Gambar</title>

</head>

<body>

</div>

</div>

</div>

</header>

<h1 class="display-4 font-italic">DAFTAR GAMBAR</h1>

</div>

<tbody>

<tr>

<td>GAMBAR 1</td>

<td><button type="button" class="btn btn-primary btn-lg circle-

btn">HAPUS </button></td>

</tr>

<tr>

<td>GAMBAR 2</td>

<td><button type="button" class="btn btn-primary btn-lg circle-

btn">HAPUS</button></td>

</tr>

<tr>

<td>GAMBAR 3</td>

<td><a href="hapus_gambar_user.html" type="button" class="btn btn-

primary btn-lg circle-btn">HAPUS</a></td>

</tr>

</tbody>

</table>

</div>

<h1 class="top-mr">DRAWPEN</H1>

</div>

<a href="login.html" type="button" class="btn btn-lg circle-btn logout-

btn">LOGOUT</a>

</div>

4.7 Daftar Gambar sesudah delete dan Source Code

Dibawah ini adalah tampilan aplikasi menggambar yang sudah dihapus:

<h1 class="display-4 font-italic">DAFTAR GAMBAR</h1>

</div>

<tbody>

<tr>

<td>GAMBAR 1</td>

<td><button type="button" class="btn btn-primary btn-lg circle-

btn">HAPUS </button></td>

</tr>

<tr>

<td>GAMBAR 2</td>

<td><button type="button" class="btn btn-primary btn-lg circle-

btn">HAPUS</button></td>

</tr>

<tr>